<template>
    <div class="item">
        <slot name="itemData" class="itemData"></slot>
        <div class="mainBlock">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.item {
  @include view;
  padding: 0.12rem;
  .itemData {
    position: relative;
    z-index: 1;
    height: 100%;
  }
  .mainBlock {
    @include absoluteAllSides(0, 0, 0, 0, -1);
    span {
      width: 0.11rem;
      height: 0.11rem;
      border: 0.02rem solid $color1;

      &:nth-of-type(1) {
        @include absoluteTLSide(-0.01, -0.01, 1);
        border-right: none;
        border-bottom: none;
      }
      &:nth-of-type(2) {
        @include absoluteTRSide(-0.01, -0.01, 1);
        border-left: none;
        border-bottom: none;
      }
      &:nth-of-type(3) {
        @include absoluteBLSide(-0.01, -0.01, 1);
        border-top: none;
        border-right: none;
      }
      &:nth-of-type(4) {
        @include absoluteBRSide(-0.01, -0.01, 1);
        border-top: none;
        border-left: none;
      }
    }
  }
}
</style>
